<template>
    <div class="">
        <div class="margin_top_20">
            <div class="row_item">选择行业</div>
            <!-- 标签列表 -->
            <first-label-class @init-ok="getMeatilSecondLevel" @select-label="getMeatilSecondLevel"></first-label-class>
        </div>
        <div>
            <Table :columns="columns" :data="selectObj?selectObj.tableData:[]"
                   @on-sort-change="sortChangeAction"></Table>
            <div v-if="selectObj && selectObj.pageInfo &&　selectObj.pageInfo.pageCount" class="page_center">
                <Page :total="selectObj.pageInfo.pageCount" :page-size="selectObj.pageInfo.pageSize" show-elevator
                      @on-change="onPageChange($event, selectObj)"></Page>
            </div>
        </div>

    </div>
</template>

<script>

    import Vue from 'vue'
    import getData from '../../api/getData'
    import firstLabelClass from "../../components/firstLabelClass.vue"

    var goodContentLogic = {

        // 根据类目查询爆文素材内容
        getVideos: function (item, vueObj) {
            console.log(vueObj)
            var paramObj = {
                MID: item.MID,
                orderType: vueObj.orderType,
                orderName: vueObj.orderName,
                pageSize: item.pageInfo ? item.pageInfo.pageSize : 10,
                pageIndex: item.pageInfo ? item.pageInfo.pageIndex : 1
            };
            getData.post("getVideos", paramObj).then(function (response) {
                var tempData = response.data.data;
                var tableData = goodContentLogic.getTableData(tempData);
                Vue.set(item, 'pageInfo', {
                    pageCount: response.data.PageCount,
                    pageSize: response.data.pageSize,
                    pageIndex: response.data.pageIndex
                });
                Vue.set(item, 'tableData', tableData);

            }).catch(function (response) {
                console.log(response);
            });
        },

        getTableData: function (data) {
            var tableData = [];
            data.forEach(function (value, index) {
                var colObj = {
                    id: value.OID,
                    img: value.OImage,
                    title: value.OTitle,
                    url: value.ONetWorkPath,
                    type: value.OAmout,
                    source: value.OSource,
                    time: value.RDate,
                    comment: value.OCommentNum,
                    favorite: value.ISSC
                };
                tableData.push(colObj);
            });
            return tableData;
        },

        ghGoodsCollect: function (url, param, vueObj) {
            getData.post(url, {MCTID: param.id}).then(function (response) {
                var data = response.data;
                if (data.code == 0) {
                    param.favorite = param.favorite ? 0 : 1;
                    vueObj.$Message.info(data.msg)
                } else {
                    vueObj.$Message.info(data.msg ? data.msg : '网络错误，请稍后重试');
                }
            }).catch(function (response) {
                console.log(response);
            });
        }

    };

    export default {
        data: function () {
            return {
                allOneData: [],
                selectId: null,
                selectObj: null,
                orderType: 1,
//              1 发布时间 2评论数 3 阅读量
                orderName: 1,
                columns: [
                    {
                        title: '缩略图',
                        key: 'img',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('Img', {
                                    attrs: {
                                        src: params.row.img
                                    },
                                    style: {
                                        width: '90px',
                                        height: '35px'
                                    },
                                })
                            ]);
                        }
                    },
                    {
                        title: '标题',
                        key: 'title',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    attrs: {
                                        href: params.row.url,
                                        target: '_blank',
                                        title: params.row.title
                                    },
                                }, params.row.title)
                            ]);
                        }
                    },
                    {
                        title: '来源',
                        key: 'source',
                        ellipsis: true
                    },
                    {
                        title: '时间',
                        key: 'time',
                        ellipsis: true,
                        sortable: true,
                    },
                    {
                        title: '播放量',
                        key: 'type',
                        ellipsis: true,
                        sortable: true,
                    },
                    {
                        title: '评论',
                        key: 'comment',
                        ellipsis: true,
                        sortable: true,
                    },
                    {
                        title: '收藏',
                        key: 'favorite',
                        ellipsis: true,
                        width: 100,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    on: {
                                        click: () => {
                                            this.markFavorite(params.row);
                                        }
                                    }
                                }, [
                                    h('Icon', {
                                        props: {
                                            type: params.row.favorite ? 'star' : 'ios-star-outline'
                                        },
                                        style: {
                                            fontSize: '20px'
                                        }
                                    })
                                ])
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            //收藏与取消收藏
            markFavorite(param){
                var url = param.favorite == 1 ? 'overseasVideoNSC' : 'overseasVideoSC';
                goodContentLogic.ghGoodsCollect(url, param, this);
            },
            //翻页
            onPageChange(page, item){
                item.pageInfo.pageIndex = page;
                goodContentLogic.getVideos(item, this);
            },
            //一级菜单组件
            getMeatilSecondLevel: function (selectedLevelObj, selecedIndex) {
                this.selectObj = selectedLevelObj;
                goodContentLogic.getVideos(selectedLevelObj, this);
            },
            sortChangeAction: function (sortJson) {
                var order = sortJson.order;
                var key = sortJson.key;
                console.log(sortJson.key)

                if (key == "time") {
                    this.orderName = 1;
                }
                if (key == "type") {
                    this.orderName = 3;
                }
                if (key == "comment") {
                    this.orderName = 2;
                }
                if (order == "desc") {
                    this.order = 1;
                } else {
                    this.order = 2;
                }
                goodContentLogic.getVideos(this.selectObj, this);
            }
        },
        components: {
            firstLabelClass,
        }
    }
</script>
